<template>
  <view class="content">
    <u-collapse v-if="morenState" @change="change" @close="close" @open="open" :border="false" v-model="moren">
      <!-- 商家信息 -->
      <u-collapse-item title="商家信息" name="0" :border="false">
        <view class="u-collapse-list">
          <view class="u-collapse-list-item">
            <view class="lable">
              店铺名称
            </view>
            <view class="item-info">
              {{list.shop_name}}
            </view>
          </view>
          <view class="u-collapse-list-item">
            <view class="lable">
              发布人员
            </view>
            <view class="item-info">
              {{list.user.nickname}}
              <span v-if="list.common_user_name">{{list.common_user_name}}</span>
            </view>
          </view> 
          <view class="u-collapse-list-item">
            <view class="lable">
              品类
            </view>
            <view class="item-info">
              <view class="item-info-table" style="background: rgba(221,227,249,0.6);">
                {{list.order_category.category_name}}
              </view>
              <!-- <view class="item-info-table" style="background: rgba(255,223,193,0.6);">美食</view> -->
            </view>
          </view>
          <view class="u-collapse-list-item">
            <view class="lable">
              是否连锁
            </view>
            <view class="item-info">
              {{list.order_chain_type.chain_type_name}}
            </view>
          </view>
          <view class="u-collapse-list-item">
            <view class="lable">
              商家ID
            </view>
            <view class="item-info">
              {{list.order_detail.shop_id}}
            </view>
          </view>
          <view class="u-collapse-list-item" style="border: none;">
            <view class="lable" style="color: #000;">
              门店信息
            </view>
          </view>
          <view class="" style="width: 670rpx;min-height: 168rpx;background-color: #F2F3F6;padding: 16rpx 20rpx;margin-bottom: 24rpx;white-space: normal;word-break: break-all;word-wrap: break-word;">
            {{list.order_store[0].store_detail}}
          </view>
          <view class="u-collapse-list-card" v-for="(item,i) in list.order_store" :key="i" v-if="item.store_name || item.province || item.city || item.area || item.address || item.contacts_name || item.contacts_phone">
            <view class="u-collapse-list-card-item">
              <view class="lable">
                门店
              </view>
              <view class="item-info">
                <span v-if="item.store_name">{{item.store_name}}</span>
                <span v-else>无</span>
              </view>
            </view>
            <view class="u-collapse-list-card-item">
              <view class="lable">
                省市区
              </view>
              <view class="item-info">
                <span v-if="item.province">{{item.province}}{{item.city}}{{item.area}}</span>
                <span v-else>无</span>
              </view>
            </view>
            <view class="u-collapse-list-card-item">
              <view class="lable">
                详细地址
              </view>
              <view class="item-info">
                <span v-if="item.address">{{item.address}}</span>
                <span v-else>无</span>
              </view>
            </view>
            <view class="u-collapse-list-card-item">
              <view class="lable">
                门店联系人
              </view>
              <view class="item-info">
                <span v-if="list.join_state == 1">{{item.contacts_name}}</span>
                <span v-else style="color:rgba(0, 0, 0, 0.4)"> (报名后显示)</span>
              </view>
            </view>
            <view class="u-collapse-list-card-item" style="border: none;">
              <view class="lable">
                联系电话
              </view>
              <view class="item-info">
                <span v-if="list.join_state == 1">{{item.contacts_phone}} </span>
                <span v-else style="color:rgba(0, 0, 0, 0.4)"> (报名后显示)</span>
              </view>
            </view>
          </view>
        </view>
      </u-collapse-item>
      <!-- 商单信息 -->
      <u-collapse-item title="商单信息" name="1" :border="false">
        <view class="u-collapse-list">
          <view class="u-collapse-list-card">
            <!-- <view class="u-collapse-list-card-item">
              <view class="lable">
                商单联系人
              </view>
              <view class="item-info">
                <span v-if="list.join_state == 1">{{list.order_detail.order_contacts_name}}</span>
                <span v-else style="color:rgba(0, 0, 0, 0.4)">(报名后显示)</span>
              </view>
            </view> -->
            <view class="u-collapse-list-card-item">
              <view class="lable">
                联系方式
              </view>
              <view class="item-info">
                <image class="minImg" src="../../static/img/dh.png" mode=""></image>
                <span v-if="list.join_state == 1">{{list.order_detail.order_contacts_phone}} </span>
                <span v-else style="color:rgba(0, 0, 0, 0.4)"> (报名后显示)</span>
                <image v-if="list.join_state == 1" class="copyImg" src="../../static/img/copy.png" mode=""
                  @tap.stop="copy(list.order_detail.order_contacts_phone)"></image>
              </view>
            </view>
            <!-- <view class="u-collapse-list-card-item">
              <view class="lable">
                微信
              </view>
              <view class="item-info">
                <image class="minImg" src="../../static/img/wx.png" mode=""></image>
                <span v-if="list.join_state == 1">{{list.order_detail.order_contacts_wx}} </span>
                <span v-else style="color:rgba(0, 0, 0, 0.4)"> (报名后显示)</span>
              </view>
            </view> -->
            <!-- <view class="u-collapse-list-card-item" style="height: 200rpx;">
              <view class="lable">
                联系人微信二维码
              </view>
              <view class="item-info">
                <image v-if="list.join_state == 1" class="seeImg" :src="list.order_detail.order_contacts_wx_qrcode"
                  mode="" @tap="showImgClick(list.order_detail.order_contacts_wx_qrcode)"></image>
                <image v-else class="seeImg" src="../../static/img/see.png" mode="aspectFill"></image>
              </view>
            </view> -->
            <view class="u-collapse-list-card-item" style="height: 200rpx;border: none;">
              <view class="lable">
                商单群二维码
              </view>
              <view class="item-info">
                <image v-if="list.join_state == 1" class="seeImg" :src="list.order_detail.order_contacts_group_qrcode"
                  mode="" @tap="showImgClick(list.order_detail.order_contacts_group_qrcode)"></image>
                <image v-else class="seeImg" src="../../static/img/see.png" mode="aspectFill"></image>
              </view>
            </view>
          </view>
          <view class="u-collapse-list-item">
            <view class="lable">
              面向城市
            </view>
            <view class="item-info">
              {{list.city_data}}
            </view>
          </view>
          <view class="u-collapse-list-item">
            <view class="lable">
              内容形式
            </view>
            <view class="item-info">
              {{list.order_content_type.content_type_name}}
            </view>
          </view>
          <view class="u-collapse-list-item">
            <view class="lable">
              商单报酬
            </view>
            <view class="item-info">
              <span>{{list.order_remunerate_type.remunerate_type_name}}</span>
            </view>
          </view>
          <view class="u-collapse-list-item">
            <view class="lable">
              招募人数
            </view>
            <view class="item-info">
              <span v-if="list.recruit_num == 0">不限</span>
              <span v-else>{{list.recruit_num}}</span>
            </view>
          </view>
          <!-- <view class="u-collapse-list-item">
            <view class="lable">
              产品体验
            </view>
            <view class="item-info">
              <span v-if="list.order_detail.experience_state == 0">无体验</span>
              <span v-if="list.order_detail.experience_state == 1">销售套餐</span>
            </view>
          </view> -->
          <view class="u-collapse-list-item">
            <view class="lable">
              探店人数限制
            </view>
            <view class="item-info">
              <span v-if="list.order_detail.exploring_num == 0">不限</span>
              <span v-else>{{list.order_detail.exploring_num}}</span>
            </view>
          </view>
          <!-- <view class="u-collapse-list-item">
            <view class="lable">
              标签话题
            </view>
            <view class="item-info">
              {{list.order_detail.label}}
            </view>
          </view> -->
          <view class="u-collapse-list-item" style="border: none;">
            <view class="lable">
              其它
            </view>
            <view class="item-info">

            </view>
          </view>
          <view
            style="width: 670rpx;min-height: 168rpx;background-color: #F2F3F6;padding: 16rpx 20rpx;margin-bottom: 24rpx;">
            {{list.order_detail.other_remark}}
          </view>
          <!-- <view class="u-collapse-list-card" style="margin-top: 32rpx;">
            <view class="u-collapse-list-card-item">
              <view class="lable">
                招募周期
              </view>
              <view class="item-info">
                <span>{{list.recruit_time}}</span>
              </view>
            </view>
            <view class="u-collapse-list-card-item">
              <view class="lable">
                探店周期
              </view>
              <view class="item-info">
                <span>{{list.order_detail.exploring_time}}</span>
              </view>
            </view>
            <view class="u-collapse-list-card-item" style="border: none;">
              <view class="lable">
                发布时间
              </view>
              <view class="item-info">
                <span>{{list.order_detail.show_time}}</span>
              </view>
            </view>

          </view> -->
        </view>
      </u-collapse-item>
      <!-- 邀约达人信息 -->
      <u-collapse-item title="邀约达人信息" name="2" :border="false">
        <view class="u-collapse-list">
          <view
            style="width: 670rpx;min-height: 168rpx;background-color: #F2F3F6;padding: 16rpx 20rpx;margin-bottom: 24rpx;white-space: normal;word-break: break-all;word-wrap: break-word;">
            {{list.order_anchor[0].anchor_detail}}
          </view>
          <view class="u-collapse-list-card" v-for="(item,i) in list.order_anchor" :key="i" v-if="item.content_level || item.fans_num || item.gender || item.level_recruit_num || item.order_remunerate_type || item.price ||item.remark||item.sales_level || item.service_price">
            <view class="u-collapse-list-card-item" style="border: none;">
              <view class="lable" style="color: #7D81A9;">
                达人
              </view>
            </view>
            <view class="u-collapse-list-card-item">
              <view class="lable">
                带货力等级要求
              </view>
              <view class="item-info">
                <span v-if="item.sales_level == 10">不限</span>
                <span v-else-if="item.sales_level">Lv{{item.sales_level}}</span>
                <span v-else>无</span>
              </view>
            </view>
            <view class="u-collapse-list-card-item">
              <view class="lable">
                内容力等级要求
              </view>
              <view class="item-info">
                <span v-if="item.content_level == 10">不限</span>
               <span v-else-if="item.content_level">Lv{{item.content_level}}</span>
               <span v-else>无</span>
              </view>
            </view>
            <view class="u-collapse-list-card-item">
              <view class="lable">
                粉丝量
              </view>
              <view class="item-info">
                <span v-if="item.fans_num">{{item.fans_num}}</span>
                <span v-else>无</span>
              </view>
            </view>
            <view class="u-collapse-list-card-item">
              <view class="lable">
                招募人数
              </view>
              <view class="item-info">
                <span v-if="item.level_recruit_num">{{item.level_recruit_num}}</span>
                <span v-else>无</span>
              </view>
            </view>
            <view class="u-collapse-list-card-item">
              <view class="lable">
                商单报酬
              </view>
              <view class="item-info">
                <span v-if="item.order_remunerate_type.remunerate_type_name">{{item.order_remunerate_type.remunerate_type_name}}</span>
                <span v-else>无</span>
              </view>
            </view>
            <view class="u-collapse-list-card-item">
              <view class="lable">
                佣金
              </view>
              <view class="item-info" style="color: #F0870B;">
                <span v-if="item.price">{{item.price}}</span>
                  <span v-else>无</span>
              </view>
            </view>
            <view class="u-collapse-list-card-item">
              <view class="lable">
                性别
              </view>
              <view class="item-info">
                <span v-if="item.gender == 1">男</span>
                <span v-if="item.gender == 2">女</span>
                <span v-if="item.gender == 0">不限</span>
              </view>
            </view>
            <view class="u-collapse-list-card-item">
              <view class="lable" style="width: 140rpx;">
                其它
              </view>
              <view class="item-info" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
                {{item.remark}}
              </view>
            </view>
          </view>

        </view>
      </u-collapse-item>
      <!-- 带货商品信息 -->
      <u-collapse-item title="带货商品信息" name="3" :border="false">
        <view class="u-collapse-list">
          <view class="u-collapse-list-item">
            <view class="lable">
              商品名称
            </view>
            <view class="item-info">
           <span v-if="list.order_detail.goods_name">{{list.order_detail.goods_name}}</span>
           <span v-else>无</span>
            </view>
          </view>
          <!-- <view class="u-collapse-list-item">
            <view class="lable">
              商品ID
            </view>
            <view class="item-info">
              <span>{{list.order_detail.goods_id}}</span>
              <image class="copyImg" src="../../static/img/copy.png" mode="" @tap.stop="copy(list.order_detail.goods_id)"></image>
            </view>
          </view> -->
          <view class="u-collapse-list-item">
            <view class="lable">
              价格
            </view>
            <view class="item-info" style="color: #F0870B;">
              <span v-if="list.order_detail.goods_price"> ¥{{list.order_detail.goods_price}}</span>
              <span v-else>无</span>
            </view>
          </view>
          <!-- <view class="u-collapse-list-item">
            <view class="lable">
              佣金期限
            </view>
            <view class="item-info">
              {{list.order_detail.goods_time}}
            </view>
          </view> -->
          <view class="" style="border: none;margin-bottom: 20rpx;">
            <view class="lable" style="display: inline-block;margin-right: 100rpx;">
              商品介绍
            </view>
            <view class="" style="display: inline-block;">
              <u-album :urls="imgData"></u-album>
            </view>
          </view>
          <view
            style="width: 670rpx;min-height: 168rpx;background-color: #F2F3F6;padding: 16rpx 20rpx;margin-bottom: 24rpx;">
            {{list.order_detail.goods_introduce_text}}
          </view>
          <view class="u-collapse-list-item" style="border: none;">
            <view class="lable">
              素材提供
            </view>
            <!-- <view class="item-info">
              <span>{{list.order_detail.material}}</span>
              <image class="copyImg" src="../../static/img/copy.png" mode="" @tap.stop="copy(list.order_detail.material)"></image>
            </view> -->
          </view>
          <view
            style="width: 670rpx;min-height: 168rpx;background-color: #F2F3F6;padding: 16rpx 20rpx;margin-bottom: 24rpx;">
            {{list.order_detail.material}}
          </view>
          <view class="ask-card">
            <view class="ask-card-title">
              内容要求
            </view>
            <view class="ask-card-content">
              {{list.order_detail.content_ask}}
            </view>
          </view>
        </view>
      </u-collapse-item>
      <!-- 报名信息 -->
      <u-collapse-item title="报名信息" name="4" :border="false" v-if="list.join_state == 1">
        <view class="u-collapse-list" style="padding-bottom: 0;">
          <view class="u-collapse-list-item">
            <view class="lable">
              探店时间
            </view>
            <view class="item-info">
              {{list.order_join.time}}
            </view>
          </view>
          <view class="u-collapse-list-item">
            <view class="lable">
              探店门店
            </view>
            <view class="item-info">
              <span v-for="(item,i) in list.order_join.order_store" :key="i">
                {{item.store_name}}{{' '}}
              </span>
            </view>
          </view>
          <view class="u-collapse-list-item">
            <view class="lable">
              报名带货力等级
            </view>
            <view class="item-info">
              Lv{{list.order_join.sales_level}}
            </view>
          </view>
          <view class="u-collapse-list-item">
            <view class="lable">
              探店人数
            </view>
            <view class="item-info">
              {{list.order_join.num}}
            </view>
          </view>
          <view class="u-collapse-list-item">
            <view class="lable">
              报名状态
            </view>
            <view class="item-info">
              <image class="applicationImg" src="../../static/img/Slice 35.png" mode=""
                v-if="list.join_state_message == '已报名'"></image>
              <image class="applicationImg" src="../../static/img/Slice 75 (1)44.png" mode=""
                v-if="list.join_state_message == '已通过'"></image>
              <image class="applicationImg" src="../../static/img/Slice 75 (1)33.png" mode=""
                v-if="list.join_state_message == '已拒绝'"></image>
              <image class="applicationImg" src="../../static/img/Slice 44.png" mode=""
                v-if="list.join_state_message == '已完成'"></image>

            </view>
          </view>
          <view class="u-collapse-list-item" style="border: none;">
            <view class="btn" @tap="quxiao()">
              取消商单
            </view>
            <view class="btn" @tap.stop="get_join_data(list,2)">
              编辑
            </view>
            <view class="btn" @tap="huitian(list.order_join.id)">
              回填链接
            </view>
            <view class="btn" style="margin-right: 0;" @tap="complete_order(list.order_join.id)">
              完成商单
            </view>
          </view>
        </view>
      </u-collapse-item>
    </u-collapse>
    <view class="bottomBox">
      <view class="bottomBoxTitle">
        请自行斟酌商单信息真伪，谨防受骗
      </view>
      <view class="btns">
        <image v-if="!collect" class="collectImg" src="../../static/img/nocollect.png" @tap="collectChange"></image>
        <image v-if="collect" class="collectImg" src="../../static/img/collect.png" @tap="collectChange"></image>
        <view class="btn" @tap="get_card_list" v-if="list.join_state == 0">
          报名
        </view>
        <view class="btn" v-else>
          {{list.join_state_message}}
        </view>
      </view>
    </view>

    <!-- 达人名片的弹框 -->
    <u-popup class="collectPopup" bgColor="#F2F3F6" :show="collectShow" :round="10" closeable
      @close="collectShow = false" @open="open">
      <view class="list">
        <view class="item">
          <view class="itemContent">
            <view class="belong">
              我的的达人名片
            </view>
            <view class="title">
              <view class="name">
                {{my_card.dy_nickname}}
                <image src="../../static/img/man.png" mode=""></image>
              </view>
              <view class="btns">
                <view class="btn" @tap="cardBtn(my_card.id,my_card.dy_nickname)" v-if="my_card.join_state == 0">
                  报名
                </view>
                <view class="btn" v-if="my_card.join_state == 1">
                  报名成功
                </view>
                <view class="frame">
                  <image src="../../static/img/Frame.png" mode=""></image>
                </view>
              </view>
            </view>
            <view class="userBox">
              <view class="avatar">
                <image src="../../static/img/Slice 40.png" mode=""></image>
              </view>
              <view class="userId">
                抖音ID:{{my_card.dy_id}}
                <image class="copyImg" src="../../static/img/copy.png" mode="" @tap.stop="copy(my_card.dy_id)"></image>
              </view>
              <view class="">

              </view>
            </view>
            <view class="lableBoxS">
              <view style="background: rgba(221,227,249,0.6);">
                {{my_card.province}}{{my_card.city}}
              </view>
              <view style="background: rgba(202,229,189,0.6);" v-for="(item,i) in my_card.category_data" :key="i">
                {{item}}
              </view>
            </view>
            <view class="numbers">
              <view class="numberBox">
                <view class="lable">
                  粉丝
                </view>
                <view class="num">
                  {{my_card.fans_num}}
                </view>
              </view>
              <view class="numberBox" style="text-align: center;">
                <view class="lable">
                  内容力等级
                </view>
                <view class="num golden">
                  Lv{{my_card.content_level}}
                </view>
              </view>
              <view class="numberBox" style="text-align: right;">
                <view class="lable">
                  带货力等级
                </view>
                <view class="num golden">
                  Lv{{my_card.sales_level}}
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 第二个 -->
        <view class="item" v-for="(item,i) in receive_card" :key="i">
          <view class="itemContent">
            <view class="belong">
              认领的达人名片
            </view>
            <view class="title">
              <view class="name">
                {{item.anchor_card.dy_nickname}}
                <image src="../../static/img/man.png" mode=""></image>
              </view>
              <view class="btns">
                <view class="btn" v-if="item.anchor_card.join_state == 0" @tap="cardBtn(item.card_id,item.dy_nickname)">
                  报名
                </view>
                <view class="btn" v-if="item.anchor_card.join_state == 1">
                  报名成功
                </view>

                <view class="frame">
                  <image src="../../static/img/Frame.png" mode=""></image>
                </view>
              </view>
            </view>
            <view class="userBox">
              <view class="avatar">
                <image src="../../static/img/Slice 40.png" mode=""></image>
              </view>
              <view class="userId">
                抖音ID: {{item.anchor_card.dy_id}}
                <image class="copyImg" src="../../static/img/copy.png" mode="" @tap.stop="copy(item.anchor_card.dy_id)">
                </image>
              </view>
              <view class="">
              </view>
            </view>
            <view class="lableBoxS">
              <view style="background: rgba(221,227,249,0.6);">
                {{item.anchor_card.province}}{{item.anchor_card.city}}
              </view>
              <view style="background: rgba(202,229,189,0.6);" v-for="(item1,i1) in item.category_data" :key="i1">
                {{item1}}
              </view>
            </view>
            <view class="numbers">
              <view class="numberBox">
                <view class="lable">
                  粉丝
                </view>
                <view class="num">
                  {{item.anchor_card.fans_num}}
                </view>
              </view>
              <view class="numberBox" style="text-align: center;">
                <view class="lable">
                  内容力等级
                </view>
                <view class="num golden">
                  Lv{{item.anchor_card.content_level}}
                </view>
              </view>
              <view class="numberBox" style="text-align: right;">
                <view class="lable">
                  带货力等级
                </view>
                <view class="num golden">
                  Lv{{item.anchor_card.sales_level}}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </u-popup>
    <!-- 报名弹框 -->
    <u-popup class="applicationBox" :show="applicationShow" @close="close" @open="open" :round="10">
      <view class="applicationContent">
        <view class="title">
          {{dy_nickname}}的达人名片
        </view>
        <u--form labelPosition="left" :model="form" ref="formRef" labelWidth="196rpx" :labelStyle="labelStyle">
          <u-form-item prop="oldpwd" label="时间" borderBottom>
            <view style="display: flex;" @tap="addTime(1)">
              <span style="flex: 1;text-align: right;">{{timeValue}}</span>
              <image style="margin: 0 0 0 18rpx;" src="../../static/img/add1.png" mode=""></image>
            </view>
          </u-form-item>
          <u-form-item prop="oldpwd" label="门店" borderBottom>
            <view style="display: flex;" @tap="goShopAddress(1)">
              <span style="flex: 1;text-align: right;">{{shopAddressValue}}</span>
              <image style="margin: 0 0 0 18rpx;" src="../../static/img/add1.png" mode=""></image>
            </view>
          </u-form-item>
          <u-form-item prop="oldpwd" label="报名带货力等级" borderBottom labelWidth="500rpx">
            <view style="display: flex;" @tap="addGrade(1)">
              <span style="flex: 1;text-align: right;">{{gradeValue}}</span>
              <image style="margin: 0 0 0 18rpx;" src="../../static/img/add1.png" mode=""></image>
            </view>

          </u-form-item>
          <u-form-item prop="oldpwd" label="到店人数" borderBottom>
            <u-input placeholder="请输入" inputAlign='right' :type="oldpwdType" v-model="confirm_join_info.num"
              border="none">
            </u-input>
          </u-form-item>
          <u-form-item prop="oldpwd" label="备注" borderBottom>
            <u-input placeholder="若为自报价商单，请标注商单价格" inputAlign='right' :type="oldpwdType"
              v-model="confirm_join_info.remark" border="none">
            </u-input>
          </u-form-item>
        </u--form>

        <view class="applicationBtns">
          <view class="qxBtn" @tap="cancelApplication">
            取消报名
          </view>
          <view class="qrBtn" @tap="application">
            确认报名
          </view>
        </view>
      </view>
    </u-popup>
    <!-- 时间弹框 -->
    <u-datetime-picker confirmColor="#7D81A9" @cancel="timeCancel" @confirm="confirmTime" :show="timeShow"
      v-model="confirm_join_info.time" mode="datetime"></u-datetime-picker>
    <!-- 带货力等级弹框 -->
    <u-picker :show="gradeShow" confirmColor="#7D81A9" @cancel="gradeCancel" @confirm="confirmGrade"
      :columns="grade"></u-picker>

    <!-- 回填视频链接 -->
    <u-popup :show="linkshow" closeable @close="linkshow = false">
      <view class="huiBox">
        <view style="font-size: 32rpx;font-weight: 500;color: #000000;margin-top: 40rpx;">
          回填已发布的视频链接
        </view>
        <input class="ipt" type="text" v-model="huiQueryInfo.video_url" placeholder="请输入视频链接">
        <view class="qrBtn" @tap="set_video_url()">
          确认
        </view>
      </view>
    </u-popup>

    <!-- 图片弹框 -->
    <u-popup :show="imgShow" @close="imgShow = false" :safeAreaInsetBottom="false" mode="center" bgColor="transparent">
      <image class="showImg" :src="showImgUrl" mode="aspectFit"></image>
    </u-popup>
    <!-- 修改报名弹框 -->
    <u-popup class="applicationBox" :show="gaiShow" @close="gaiShow = false" :round="10">
      <view class="applicationContent">
        <view class="title" style="height: 50rpx;">
        </view>
        <u--form labelPosition="left" :model="form" ref="formRef" labelWidth="196rpx" :labelStyle="labelStyle">
          <u-form-item prop="oldpwd" label="时间" borderBottom>
            <view style="display: flex;" @tap="addTime(2)">
              <span style="flex: 1;text-align: right;">{{edit_join_data.time}}</span>
              <image style="margin: 0 0 0 18rpx;" src="../../static/img/add1.png" mode=""></image>
            </view>
          </u-form-item>
          <u-form-item prop="oldpwd" label="门店" borderBottom>
            <view style="display: flex;" @tap="goShopAddress">
              <span style="flex: 1;text-align: right;">{{shopAddressValue1}}</span>
              <image style="margin: 0 0 0 18rpx;" src="../../static/img/add1.png" mode=""></image>
            </view>
          </u-form-item>
          <u-form-item prop="oldpwd" label="报名带货力等级" borderBottom labelWidth="300rpx">
            <view style="display: flex;" @tap="addGrade(2)">
              <span style="flex: 1;text-align: right;">{{gradeValue1}}</span>
              <image style="margin: 0 0 0 18rpx;" src="../../static/img/add1.png" mode=""></image>
            </view>
          </u-form-item>
          <u-form-item prop="oldpwd" label="到店人数" borderBottom>
            <u-input placeholder="请输入" inputAlign='right' :type="oldpwdType" v-model="edit_join_data.num" border="none">
            </u-input>
          </u-form-item>
          <u-form-item prop="oldpwd" label="备注" borderBottom>
            <u-input placeholder="请输入" inputAlign='right' :type="oldpwdType" v-model="edit_join_data.remark"
              border="none">
            </u-input>
          </u-form-item>
        </u--form>

        <view class="applicationBtns">
          <view class="qxBtn" @tap="gaiShow = false">
            取消修改
          </view>
          <view class="qrBtn" @tap="shanchushow = true">
            确认修改
          </view>
        </view>
      </view>
    </u-popup>

    <!-- 确认弹框 -->
    <u-modal :show="shanchushow" style="text-align: center;" confirmText="确认" cancelText="取消" showCancelButton
      cancelColor="#1D2129" confirmColor="#7D81A9" @cancel="shanchushow = false" close @confirm="edit_join_data_btn">
      若修改信息，需商家重新同意。是否确认修改？
    </u-modal>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        imgShow: false,
        timeShow: false,
        showImgUrl: '',
        huiQueryInfo: {
          video_url: '',
          order_join_id: ''
        },
        imgData: [],
        collect: false,
        collectShow: false,
        linkshow: false,
        applicationShow: false,
        timeShow: false,
        gradeShow: false,
        gaiShow: false,
        shanchushow: false,
        gradeValue1: '',
        shopAddressValue1: '',
        gai: '',
        list: {},
        grade: [
          ['Lv1', 'Lv2', 'Lv3', 'Lv4', 'Lv5', 'Lv6', 'Lv7']
        ],
        setCollectInfo: {
          id: '',
          type: '1'
        },
        order_sn: '',
        receive_card: [],
        my_card: {},
        card_id: '',
        dy_nickname: '',
        timeValue: '',
        confirm_join_info: {
          order_sn: '',
          card_id: '',
          time: Number(new Date()),
          store_id: '',
          sales_level: '',
          num: '',
          remark: ''
        },
        edit_join_data: {
          time: '',
          store_id: '',
          sales_level: '',
          num: '',
          remark: ''
        },
        shopAddressValue: '',
        gradeValue: "",
        moren: [],
        morenState: false,
        dataType: ''
      };
    },
    onShow() {
      const shopAddress = uni.getStorageSync('name');

      this.confirm_join_info.store_id = uni.getStorageSync('store_id');
      if (!shopAddress) {
        this.shopAddressValue = '请选择门店'
      } else {
        if (this.dataType == 1) {
          this.shopAddressValue = shopAddress
        } else {
          this.shopAddressValue1 = shopAddress
        }
      }
    },
    onLoad(obj) {
      this.get_order_detail(obj)
      this.order_sn = obj.order_sn
      this.confirm_join_info.order_sn = obj.order_sn
    },
    methods: {
      async quxiao() {
        const obj = {
          order_join_id: this.list.order_join.id
        }
        const obj1 = {
          order_sn: this.list.order_sn
        }
        const {
          data: res
        } = await uni.$http.post('order/refuse_order', obj)
        if (res.code != 1) {
          this.toast.msg(res.msg)
          return
        }
        this.toast.msg(res.msg)
        this.get_order_detail(obj1)
      },
      showImgClick(url) {
        this.showImgUrl = url
        this.imgShow = true
      },
      // 获取报名信息弹框
      async get_join_data(i, n) {
        this.gai == n
        const obj = {
          order_join_id: i.order_join.id
        }
        const {
          data: res
        } = await uni.$http.post('order/get_join_data', obj)
        if (res.code != 1) {
          this.toast.msg(res.msg)
          return
        } else {
          console.log(res);
          this.edit_join_data.order_join_id = i.order_join.id
          this.edit_join_data.time = res.data.time
          this.edit_join_data.store_id = res.data.order_store_id
          this.edit_join_data.sales_level = res.data.sales_level
          this.edit_join_data.num = res.data.num
          this.edit_join_data.remark = res.data.remark
          this.gradeValue1 = 'Lv' + this.edit_join_data.sales_level
          const {
            data: res1
          } = await uni.$http.post('join_order/get_store_list', {
            order_sn: i.order_sn
          })
          if(res1.data.show_state == '0' ) {
            res1.data.data.forEach((item) => {
              if (this.edit_join_data.store_id == item.store_id) {
                this.shopAddressValue1 = item.store_name
              }
            })
          }else {
             this.shopAddressValue1 = '商家自定义门店'
          }
          this.gaiShow = true
        }
      },
      async edit_join_data_btn() {
        this.gaiShow = false
        this.edit_join_data.time =  this.timestampToTime(this.edit_join_data.time)
        const {
          data: res
        } = await uni.$http.post('order/edit_join_data', this.edit_join_data)
        this.shanchushow = false
        if (res.code != 1) {
          this.toast.msg(res.msg)
          return
        } else {
          this.toast.msg(res.msg)
        }
      },
      notOpened() {
        this.toast.msg('暂未开通')
      },
      async complete_order(id) {
        const obj = {
          order_join_id: id
        }
        const {
          data: res
        } = await uni.$http.post('order/complete_order', obj)
        if (res.data != 1) {
          this.toast.msg(res.msg)
          return
        }
        this.toast.msg(res.msg)
      },
      huitian(id) {
        this.linkshow = true
        this.huiQueryInfo.order_join_id = id
      },
      async set_video_url() {
        const {
          data: res
        } = await uni.$http.post('order/set_video_url', this.huiQueryInfo)
        if (res.data != 1) {
          this.toast.msg(res.msg)
          return
        }
        this.linkshow = false
        this.toast.msg(res.msg)
      },
      cardBtn(id, dy_nickname) {
        this.collectShow = false
        this.card_id = id
        this.confirm_join_info.card_id = id
        this.dy_nickname = dy_nickname
        this.applicationShow = true
      },
      // 打开时间选择
      addTime(n) {
        this.dataType = n
        if (n == 1) {
          this.applicationShow = false
          this.timeShow = true
        } else if (n == 2) {
          this.gaiShow = false
          this.timeShow = true
        }
      },
      // 关闭时间选择
      timeCancel() {
        this.timeShow = false
        if (this.dataType == 1) {
          this.applicationShow = true
        } else {
          this.gaiShow = true
        }
      },
      // 确认时间
      async confirmTime(e) {
        this.timeShow = false
        if (this.dataType == 1) {
          this.applicationShow = true
          const timeFormat = uni.$u.timeFormat;
          let timeValue = await timeFormat(e.value, 'yyyy-mm-dd hh:MM');
          this.timeValue = timeValue
          this.agree_invite.time = timeValue
        }
        if (this.dataType == 2) {
          this.gaiShow = true
          const timeFormat = uni.$u.timeFormat;
          let timeValue = await timeFormat(e.value, 'yyyy-mm-dd hh:MM');
          console.log(timeValue);
          this.edit_join_data.time = timeValue
          console.log(this.edit_join_data.time);
        }
      },
      // 打开带货力等级
      // 打开带货力等级
      addGrade(n) {
        this.dataType = n
        if (n == 1) {
          this.applicationShow = false
        }
        if (n == 2) {
          this.gaiShow = false
        }
        this.gradeShow = true
      },
      // 关闭带货力等级
      gradeCancel() {
        if (this.gai == 1) {
          this.applicationShow = true
        } else if (this.gai == 2) {
          this.gaiShow = true
        }
        this.gradeShow = false
      },
      // 确认带货力等级
      async confirmGrade(e) {
        this.gradeShow = false
        if (this.dataType == 1) {
          this.applicationShow = true
          this.gradeValue = e.value[0]
          if (this.gradeValue == 'Lv0') {
            this.confirm_join_info.sales_level = 0
          }
          if (this.gradeValue == 'Lv1') {
            this.confirm_join_info.sales_level = 1
          }
          if (this.gradeValue == 'Lv2') {
            this.confirm_join_info.sales_level = 2
          }
          if (this.gradeValue == 'Lv3') {
            this.confirm_join_info.sales_level = 3
          }
          if (this.gradeValue == 'Lv4') {
            this.confirm_join_info.sales_level = 4
          }
          if (this.gradeValue == 'Lv5') {
            this.confirm_join_info.sales_level = 5
          }
          if (this.gradeValue == 'Lv6') {
            this.confirm_join_info.sales_level = 6
          }
          if (this.gradeValue == 'Lv7') {
            this.confirm_join_info.sales_level = 7
          }
        } else {
          this.gaiShow = true
          this.gradeValue1 = e.value[0]
          if (this.gradeValue1 == 'Lv0') {
            this.edit_join_data.sales_level = 0
          }
          if (this.gradeValue1 == 'Lv1') {
            this.edit_join_data.sales_level = 1
          }
          if (this.gradeValue1 == 'Lv2') {
            this.edit_join_data.sales_level = 2
          }
          if (this.gradeValue1 == 'Lv3') {
            this.edit_join_data.sales_level = 3
          }
          if (this.gradeValue1 == 'Lv4') {
            this.edit_join_data.sales_level = 4
          }
          if (this.gradeValue1 == 'Lv5') {
            this.edit_join_data.sales_level = 5
          }
          if (this.gradeValue1 == 'Lv6') {
            this.edit_join_data.sales_level = 6
          }
          if (this.gradeValue1 == 'Lv7') {
            this.edit_join_data.sales_level = 7
          }
        }
      },
      cancelApplication() {
        this.applicationShow = false
        uni.showToast({
          title: '已取消报名',
          icon: 'none'
        })
      },
       timestampToTime(timestamp) {
        // 时间戳为10位需*1000，时间戳为13位不需乘1000
        var date = new Date(timestamp);
        var Y = date.getFullYear() + "-";
        var M =
          (date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1) + "-";
        var D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
        var h = (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
        var m = (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes());
        var s = date.getSeconds();
        return Y + M + D + h + m;
      },
      // 点击报名
      async application() {
        this.confirm_join_info.time =  this.timestampToTime(this.confirm_join_info.time)
        const {
          data: res
        } = await uni.$http.post('join_order/confirm_join', this.confirm_join_info)
        if (res.code != 1) {
          this.toast.msg(res.msg)
          return
        }
        uni.showToast({
          title: '报名成功',
          icon: 'success '
        })
        this.applicationShow = false
      },
      // 跳转门店地址选择
      goShopAddress() {
        uni.navigateTo({
          url: '/pages/shopAddress/shopAddress?order_sn=' + this.order_sn
        })
      },
      async get_order_detail(obj) {
        const {
          data: res
        } = await uni.$http.post('order/get_order_detail', obj)
        if (res.code != 1) {
          this.toast.msg(res.msg)
          return
        }
        this.list = res.data
        this.moren = ['0', '1', '2', '3', '4']
        this.morenState = true
        this.collect = this.list.collect_state
        this.setCollectInfo.id = this.list.order_sn
        this.order_sn = this.list.order_sn
        this.imgData = res.data.order_detail.goods_introduce_img.split(',')
        console.log(this.imgData);
      },
      open(e) {
        // console.log('open', e)
      },
      close(e) {
        // console.log('close', e)
      },
      change(e) {
        // console.log('change', e)
      },
      // 收藏
      async collectChange() {
        const {
          data: res
        } = await uni.$http.post('others/set_collect', this.setCollectInfo)
        if (res.code != 1) {
          this.toast.msg(res.msg)
          return
        }
        this.collect = !this.collect
        this.toast.msg(res.msg)
      },
      confirmRegistration() {
        this.collectShow = false
        uni.showToast({
          title: '报名成功',
          icon: 'success'
        });
      },
      async get_card_list() {
        this.dataType = 1
        const {
          data: res
        } = await uni.$http.post('join_order/get_card_list', {
          order_sn: this.order_sn
        })
        if (res.code != 1) {
          this.toast.msg(res.msg)
          return
        }
        if (res.data.my_card.length <= 0 && res.data.receive_card.length <= 0) {
          this.toast.msg('您还没有达人名片，请点击右下方创建达人名片。')
          this.collectShow = false
          return
        } else {
          this.collectShow = true
        }
        this.my_card = res.data.my_card
        this.receive_card = res.data.receive_card
      }
    }
  }
</script>

<style lang="scss">
  .content {
    box-sizing: border-box;
    min-height: 100vh;
    background-color: #F2F3F6;
    padding-top: 32rpx;
    padding-bottom: 204rpx;

    .u-collapse {
      /deep/.u-collapse-item {
        margin-bottom: 24rpx;
        background-color: #fff;
        border: none;
      }

      /deep/.u-cell {
        height: 108rpx;
        line-height: 108rpx;
      }

      /deep/.u-cell__body {
        padding: 0 32rpx;
      }

      /deep/.u-cell__title-text {
        height: 108rpx;
        line-height: 108rpx;
        font-size: 32rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 550;
      }

      /deep/.u-collapse-item__content__text {
        padding: 0;
      }
    }

    // 自己的样式
    .u-collapse-list {
      padding-left: 40rpx;
      padding-bottom: 40rpx;

      .u-collapse-list-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 108rpx;
        padding-right: 40rpx;
        border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);

        .lable {
          font-size: 28rpx;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #6E7480;
        }

        .item-info {
          font-size: 28rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #000000;

          /deep/.item-info-table {
            display: inline-block;
            height: 34rpx;
            line-height: 34rpx;
            text-align: center;
            border-radius: 2rpx;
            margin-left: 8rpx;
            font-size: 20rpx !important;
            color: #000000;
            font-weight: 400;
            padding: 0 12rpx;
          }
        }

        .btn {
          width: 156rpx;
          height: 64rpx;
          line-height: 64rpx;
          text-align: center;
          background: #7D81A9;
          border-radius: 200rpx;
          font-size: 24rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #FFFFFF;
          margin-right: 16rpx;
        }
      }

      .u-collapse-list-card {
        box-sizing: border-box;
        width: 670rpx;
        background: linear-gradient(135deg, #F2F3F6 0%, rgba(242, 243, 246, 0) 100%);
        border-radius: 16rpx;
        padding: 0 32rpx;

        .u-collapse-list-card-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 108rpx;
          border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);
        }
      }
    }

    .bottomBox {
      width: 100%;
      position: fixed;
      bottom: 0;
      left: 0;
      height: 204rpx;
      background: #FFFFFF;

      .bottomBoxTitle {
        margin: 24rpx 0 20rpx;
        color: #EAA04A;
        text-align: center;
        font-size: 24rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
      }

      .btns {
        box-sizing: border-box;
        display: flex;
        padding: 0 32rpx;

        .collectImg {
          width: 64rpx;
          height: 64rpx;
          margin-right: 24rpx;
        }

        .btn {
          width: 598rpx;
          height: 80rpx;
          text-align: center;
          line-height: 80rpx;
          background: #7D81A9;
          border-radius: 40rpx;
          font-size: 28rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #FFFFFF;
        }
      }
    }

    .minImg {
      display: inline-block;
      width: 28rpx;
      height: 28rpx;
      margin-right: 8rpx;
    }

    .copyImg {
      display: inline-block;
      width: 28rpx;
      height: 28rpx;
      margin-left: 8rpx;
    }

    .seeImg {
      width: 136rpx;
      height: 136rpx;
    }

    .ask-card {
      box-sizing: border-box;
      margin-top: 32rpx;
      width: 686rpx;
      height: 358rpx;
      background: linear-gradient(180deg, #F2F3F6 0%, rgba(242, 243, 246, 0) 100%);
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      padding: 32rpx;

      .ask-card-title {
        font-size: 32rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 550;
        color: rgba(0, 0, 0, 0.8);
        margin-top: 32rpx;
      }

      .ask-card-content {
        box-sizing: border-box;
        margin-top: 16rpx;
        padding: 16rpx 24rpx;
        width: 622rpx;
        min-height: 234rpx;
        background: #fff;
        border-radius: 16rpx;
        font-size: 28rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.8);
      }
    }

    .applicationImg {
      width: 92rpx;
      height: 36rpx;
    }

    // 名片弹框

    .collectPopup {}

    .list {
      max-height: 1172rpx;
      background-color: #F2F3F6;
      margin-top: 120rpx;

      .item {
        width: 686rpx;
        height: 324rpx;
        padding-bottom: 26rpx;
        background: #FFFFFF;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        margin: 24rpx auto;

        .itemContent {
          padding: 18rpx 22rpx 0 24rpx;

          .belong {
            font-size: 28rpx;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: rgba(0, 0, 0, 0.8);
          }

          .title {
            display: flex;
            align-items: center;
            margin-top: 24rpx;

            .name {
              flex: 1;
              width: 380rpx;
              font-size: 32rpx;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 550;
              color: #000000;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;

              image {
                display: inline-block;
                width: 24rpx;
                height: 24rpx;
                margin-left: 8rpx;
              }
            }

            .btns {

              display: flex;
              font-size: 24rpx;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 500;
              color: #FFFFFF;

              .btn {
                width: 128rpx;
                height: 52rpx;
                line-height: 52rpx;
                text-align: center;
                background: #7D81A9;
                border-radius: 40rpx;
                margin-right: 16rpx;
              }

              .frame {
                width: 52rpx;
                height: 52rpx;

                image {
                  width: 52rpx;
                  height: 52rpx;
                }
              }
            }
          }

          .lableBoxS {
            display: flex;
            color: rgba(0, 0, 0, 0.6);
            font-size: 20rpx;
            margin-top: 20rpx;
            margin-bottom: 18rpx;

            view {
              height: 32rpx;
              line-height: 32rpx;
              padding: 0 12rpx;
              margin-right: 8rpx;
            }
          }

          .numbers {
            display: flex;
            align-items: center;
            flex-wrap: wrap;

            .numberBox {
              width: 33%;
              display: flex;
              align-items: center;
              text-align: center;
            }

            .lable {
              font-size: 24rpx;
              color: #6E7480;
            }

            .num {
              font-size: 32rpx;
              color: #000000;
            }

            .golden {
              font-size: 32rpx;
              color: #EAA04A;
            }
          }

          .userBox {
            display: flex;
            align-items: center;
            height: 52rpx;
            margin-top: 14rpx;

            .avatar {
              width: 44rpx;
              height: 44rpx;
              border-radius: 22rpx;

              image {
                width: 100%;
                height: 100%;
              }
            }

            .userId {
              font-size: 24rpx;
              font-family: PingFang SC-Regular, PingFang SC;
              color: #6E7480;
              margin: 0 8rpx;

              .copyImg {
                width: 28rpx;
                height: 28rpx;
                margin-left: 8rpx;
              }
            }

            .btnS {
              display: flex;

              .btn {
                width: 128rpx;
                height: 52rpx;
                line-height: 52rpx;
                text-align: center;
                background: #7D81A9;
                border-radius: 40rpx;
                font-size: 24rpx;
                font-family: PingFang SC-Medium, PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
                margin-right: 16rpx;
              }

              .shareImg {
                width: 52rpx;
                height: 52rpx;
              }
            }
          }
        }
      }
    }

    .applicationContent {
      padding-left: 40rpx;

      .title {
        height: 100rpx;
        line-height: 100rpx;
        font-size: 32rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 600;
        color: #000000;
      }

      .u-form-item {
        height: 108rpx;
        // margin-right: 20rpx;
        padding-right: 20rpx;

        span {
          font-size: 28rpx;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.4);
        }

        image {
          display: inline-block;
          vertical-align: middle;
          width: 42rpx;
          height: 42rpx;
        }
      }

      .applicationBtns {
        height: 162rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;

        view {
          width: 320rpx;
          height: 80rpx;
          line-height: 80rpx;
          border-radius: 40rpx;
          text-align: center;
        }

        .qxBtn {
          box-sizing: border-box;
          border: 2rpx solid rgba(125, 129, 169, 0.3);
          color: #7D81A9;
          margin-right: 22rpx;
        }

        .qrBtn {
          background: #7D81A9;
          color: #fff;
        }
      }
    }

    .huiBox {
      padding: 0 40rpx;

      .ipt {
        width: 670rpx;
        height: 80rpx;
        background: #F2F3F6;
        border-radius: 126rpx;
        box-sizing: border-box;
        padding: 0 42rpx;
        margin: 80rpx 0;
      }

      .qrBtn {
        width: 686rpx;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        margin: 0 auto;
        background: #7D81A9;
        border-radius: 40rpx;
        font-size: 28rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
      }
    }
  }
</style>